<template>
    <div class="townshipCoverage">
        <div class="dash-board">
            <div class="footer-item">
                <div id="myCountyCoverageChartYpg3"></div>
                <p style="margin-top:-20px;font-size: 18px;">覆盖率</p>
            </div>
            <div class="footer-item">
                <div id="myTownCover3"></div>
            </div>
        </div>
    </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { getVillageCoverage, getProvinceVillageCov } from '@/api/provincePreEvaluation.js';
const props = defineProps({
    code: String
})
const listData = ref([]);
const countyCoverage = ref('');
const renderChart = () => {
    echarts.init(document.getElementById('myCountyCoverageChartYpg3')).dispose();
    let myChart = echarts.init(document.getElementById('myCountyCoverageChartYpg3'));
    const option = {
        series: [
            {
                type: 'gauge',
                min: 0,
                max: 100,
                splitNumber: 5,
                axisLine: {
                    lineStyle: {
                        width: 10,
                        color: [
                            [0.33, '#0775FE'],
                            [0.67, '#46FFFF'],
                            [1, '#F9387F']
                        ]
                    }
                },
                pointer: {
                    // icon: ('@/assets/images/disaterLosses/pointer.png'),
                    length: '60%',
                    width: 4,
                    offsetCenter: [0, '50%']
                },
                axisTick: {
                    distance: -30,
                    length: 8,
                    lineStyle: {
                        color: 'transparent',
                        width: 2
                    }
                },
                splitLine: {
                    distance: -30,
                    length: 30,
                    lineStyle: {
                        color: 'transparent',
                        width: 4
                    }
                },
                axisLabel: {
                    color: '#fff',
                    distance: -56,
                    fontSize: 10
                },
                detail: {
                    valueAnimation: true,
                    // formatter: '{b}{@[1]}',
                    color: '#46FFFF',
                    fontSize: 24,
                    offsetCenter: [0, '70%'],
                },
                data: [
                    {
                        value: countyCoverage.value
                    }
                ]
            }
        ]
    };
    // 渲染
    option && myChart.setOption(option);
    window.onresize = function () {
        // 自适应大小
        myChart.resize();
    };
}
const renderChart1 = () => {
    echarts.init(document.getElementById('myTownCover3')).dispose();
    let myChart = echarts.init(document.getElementById('myTownCover3'));
    listData.value.forEach((item, index) => {
        item.value = [index + 1,item.coverage];
        item.name = item.province;
    })
    const option = {
        color: [new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
            offset: 0,
            color: '#297FFF'
        },
        {
            offset: 1,
            color: '#46FFFF'
        }]), new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
            offset: 0,
            color: '#FF50E8'
        },
        {
            offset: 1,
            color: '#297FFF'
        }]), new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
            offset: 0,
            color: '#FFAA38'
        },
        {
            offset: 1,
            color: '#FF50E8'
        }]), new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
            offset: 0,
            color: '#FF1883'
        },
        {
            offset: 1,
            color: '#FFAA38'
        }]), new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
            offset: 0,
            color: '#FF1C1C'
        },
        {
            offset: 1,
            color: '#FF1883'
        }])],
        series: [
            {
                name: '覆盖率',
                type: 'funnel',
                left: 0,
                top: 0,
                bottom: 30,
                width: '60%',
                sort: 'ascending',
                gap: 5,
                label: {
                    formatter: '{b}{@[1]}',
                    show: true,
                    fontSize: 14,
                    color:'#fff',
                    position: 'outside',
                },
                itemStyle: {
                    borderColor: '#fff',
                    borderWidth: 0
                },
                data: listData.value,
            }
        ]
    };
    // 渲染
    option && myChart.setOption(option);
    window.onresize = function () {
        // 自适应大小
        myChart.resize();
    };
}

// 县覆盖率
const setChart = () => {
    getVillageCoverage({ code: props.code }).then((res) => {
        countyCoverage.value = res.data;
        renderChart();
    });
}
// 省覆盖率
const provinceCoverage = () => {
    getProvinceVillageCov({ code: props.code }).then((res) => {
        listData.value = res.data;
        renderChart1();
    })
}

onMounted(() => {
    provinceCoverage()
    setChart()
    window.addEventListener('resize', resize)
})
const resize = () => {
    let myChart = echarts.init(document.getElementById("myCountyCoverageChart"));
    let myChart1 = echarts.init(document.getElementById("myTownCover3"));
    myChart.resize()
    myChart1.resize()
}
onBeforeUnmount(() => {
    window.removeEventListener('resize', resize)
})
</script>

<style lang='scss' scoped>
.townshipCoverage {
    width: 100%;
    height: 240px;
}

.dash-board {
    height: 100%;
    padding: 10px;
    display: flex;

    .footer-item {
        margin-top: 10px;
        position: relative;
        text-align: center;
        width: 50%;

        p {
            margin-left: -12px;
        }

        ul {
            width: 181px;
            position: relative;
            // background: pink;
            height: 170px;
            margin: 0 20px;

            li {
                display: block;
                position: absolute;
                border-radius: 50%;
                text-align: center;

                span {
                    display: block;
                    font-size: 12px;
                    color: #fff;
                }

                span.area-num {
                    font-size: 14px;
                    margin-top: 12px;
                }

                &:nth-child(1) {
                    width: 83px;
                    height: 82px;
                    background-size: 100% 100%;
                    background-image: url('@/assets/images/disaterLosses/area.png');
                    top: 42px;
                    left: 43px;

                    span.area-num {
                        font-size: 16px;
                        margin-top: 24px;
                    }
                }

                &:nth-child(2) {
                    width: 56px;
                    height: 56px;
                    background: radial-gradient(circle at 50% 50%, rgba(227, 46, 255, 0.15) 0%, rgba(227, 46, 255, 0.5) 75%, rgba(227, 46, 255, 0.7) 100%);
                    box-shadow: 0px 0px 10px 1px #E32EFF;
                    border: 1px solid #E32EFF;
                    left: 15px;
                    bottom: 0;
                }

                &:nth-child(3) {
                    width: 50px;
                    height: 50px;
                    background: radial-gradient(circle at 50% 50%, rgba(166, 216, 57, 0.15) 0%, rgba(166, 216, 57, 0.5) 75%, rgba(166, 216, 57, 0.7) 100%);
                    box-shadow: 0px 0px 10px 1px #A6D839;
                    border: 1px solid #A6D839;
                    right: 0;
                    bottom: 24px;
                }

                &:nth-child(4) {
                    width: 45px;
                    height: 45px;
                    background: radial-gradient(circle at 50% 50%, rgba(14, 194, 194, 0.15) 0%, rgba(26, 199, 199, 0.5) 75%, rgba(70, 255, 255, 0.7) 100%);
                    box-shadow: 0px 0px 10px 1px #46FFFF;
                    border: 1px solid #46FFFF;
                    top: 5px;
                    right: 24px;

                    span.area-num {
                        font-size: 12px;
                        margin-top: 8px;
                    }
                }

                &:nth-child(5) {
                    width: 42px;
                    height: 42px;
                    background: radial-gradient(circle at 50% 50%, rgba(255, 179, 91, 0.15) 0%, rgba(255, 179, 91, 0.5) 75%, rgba(255, 179, 91, 0.7) 100%);
                    box-shadow: 0px 0px 10px 1px #FFB35B;
                    border: 1px solid #FFB35B;
                    top: 20px;
                    left: 6px;

                    span.area-num {
                        font-size: 12px;
                        margin-top: 6px;
                    }
                }

                &:nth-child(6) {
                    width: 30px;
                    height: 30px;
                    background: radial-gradient(circle at 50% 50%, rgba(166, 216, 57, 0.15) 0%, rgba(166, 216, 57, 0.5) 75%, rgba(166, 216, 57, 0.7) 100%);
                    box-shadow: 0px 0px 10px 1px #A6D839;
                    opacity: 0.33;
                    border: 1px solid #A6D839;
                    top: 0;
                    left: 60px;
                }

                &:nth-child(7) {
                    width: 27px;
                    height: 27px;
                    background: radial-gradient(circle at 50% 50%, rgba(7, 117, 254, 0.15) 0%, rgba(7, 117, 254, 0.5) 75%, rgba(7, 117, 254, 0.7) 100%);
                    box-shadow: 0px 0px 10px 1px #0775FE;
                    border: 1px solid #0775FE;
                    left: 0;
                    bottom: 62px;
                }

                &:nth-last-child(3) {
                    width: 25px;
                    height: 25px;
                    background: radial-gradient(circle at 50% 50%, rgba(14, 194, 194, 0.15) 0%, rgba(26, 199, 199, 0.5) 75%, rgba(70, 255, 255, 0.7) 100%);
                    box-shadow: 0px 0px 10px 1px #46FFFF;
                    opacity: 0.5;
                    border: 1px solid #46FFFF;
                    right: 44px;
                    bottom: 2px;
                }

                &:nth-last-child(2) {
                    width: 20px;
                    height: 20px;
                    background: radial-gradient(circle at 50% 50%, rgba(255, 179, 91, 0.15) 0%, rgba(255, 179, 91, 0.5) 75%, rgba(255, 179, 91, 0.7) 100%);
                    box-shadow: 0px 0px 10px 1px #FFB35B;
                    opacity: 0.7;
                    border: 1px solid #FFB35B;
                    left: 80px;
                    bottom: 24px;
                }

                &:last-child {
                    width: 19px;
                    height: 19px;
                    background: radial-gradient(circle at 50% 50%, rgba(227, 46, 255, 0.15) 0%, rgba(227, 46, 255, 0.5) 75%, rgba(227, 46, 255, 0.7) 100%);
                    box-shadow: 0px 0px 10px 1px #E32EFF;
                    opacity: 0.39;
                    border: 1px solid #E32EFF;
                    right: 19px;
                    top: 60px;
                }
            }
        }
    }

    #myCountyCoverageChartYpg3 {
        width: 200px;
        height: 160px;
        position: relative;
        margin-top: 5px;

        &::after {
            content: '';
            display: block;
            width: 150px;
            height: 125px;
            font-size: 10px;
            background-size: 100% 100%;
            background-image: url('@/assets/images/disaterLosses/fh_bg.png');
            position: absolute;
            top: 5px;
            left: 25px;
        }

    }

    #myTownCover3 {
        width: 100%;
        height: 100%;
    }
}
</style>